---
import FormattedDate from "@/components/FormattedDate.astro";
import BaseLayout from "@/layouts/BaseLayout.astro";
import {markedText} from "@/utils/markedUtil";
import {getBlogById} from "@/service/BlogService";
import {getBlogComments} from "@/service/BlogService";
import CommentItem from "@/components/CommentItem.astro";
import {actions} from 'astro:actions';
export const prerender = false;
const blog = await getBlogById(parseInt(Astro.params.slug))
if (!blog) {
    return Astro.rewrite("/404");
}
const {title, summary, image, createTime, updateTime, content} = blog;
const comments = await getBlogComments(blog.id)
const result = Astro.getActionResult(actions.blog_comment);
if (result) {
    if (result.error){
        console.log(result.error)
    }else {
        console.log(result.data)
    }
}
---
<BaseLayout title={title} description={summary}>
    <section class="section">
        <div class="container mx-auto">
            <div class="hero-image">
                {image && <img width={1020} height={510} src={image} alt=""/>}
            </div>
            <div class="title mb-8">
                <div class="date my-2">
                    <FormattedDate date={createTime}/>
                    {
                        updateTime && (
                                    <div class="last-updated-on">
                                        最后更新
                                        <FormattedDate date={updateTime}/>
                                    </div>
                        )
                    }
                </div>
                <h1>{title}</h1>
            </div>
            <div class="prose max-w-none" set:html={markedText(content)}></div>
        </div>
    </section>
    <section class="">
        <div class="container mx-auto">
            <h3>评论</h3>
            {comments.length > 0 ?
                    <div class="border rounded-xl my-6 p-6">
                        {comments.map((comment, index) =>
                                <CommentItem comment={comment}/>)}
                    </div>
                :
                    <div class="text-gray-500 my-4">暂无评论</div>
            }
            <h3>留下评论</h3>
            <div class="my-6">
                <form method="post" action={actions.blog_comment}>
                    <input type="hidden" name="blogId" value={blog.id}/>
                    <label >
                         <textarea
                                 class="form-textarea w-full rounded-xl"
                                 name="message"
                                 rows="7"
                                 placeholder="Your message"></textarea>
                    </label>
                    <button type="submit" class="sub-btn btn btn-primary mt-4">立即发送</button>
                </form>
            </div>
        </div>
    </section>

</BaseLayout>
